<template>
  <main>
    <div class="require-container">
      <div class="require-title">
        <span style="font-weight: 600; margin-left: 20px; margin-right: 20px">
          已发布的需求
        </span>
      </div>
      <div class="require-body">
        <el-table
          stripe
          :data="tableData"
          row-class-name="table-cell"
          style="width: 100%"
          height="250"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            fixed="left"
            prop="reqType"
            label="需求类型"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="proName" label="项目名称" width="120">
          </el-table-column>
          <el-table-column prop="proType" label="工程类型" width="120">
          </el-table-column>
          <el-table-column prop="proCode" label="工程编码" width="120">
          </el-table-column>
          <el-table-column prop="bugType" label="采购类别" width="120">
          </el-table-column>
          <el-table-column prop="prePrice" label="估算价格" width="300">
          </el-table-column>
          <el-table-column prop="buyRange" label="采购范围" width="120">
          </el-table-column>
          <el-table-column prop="timeReq" label="工期需求" width="120">
          </el-table-column>
          <el-table-column prop="busReq" label="供应商需求" width="300">
          </el-table-column>
          <el-table-column prop="reqCause" label="需求原因" width="120">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </main>
</template>

<script>
import { getPublishRequirementAll } from "api/require.api";

export default {
  name: "HasRequiredManage",
  data() {
    return {
      multipleSelection: [],
      tableData: [],
    };
  },
  mounted() {
    this.getRequirementAll();
  },
  methods: {
    rowClick(row) {
      console.log("ahah");
      this.$router.push({
        path: "requireDetail",
        query: {
          id: row.id,
        },
      });
    },
    getRequirementAll() {
      const response = getPublishRequirementAll();
      const { data, code, msg } = response;
      if (code !== 0) {
        this.$message.warning(msg);
        return;
      }

      this.tableData = data;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setLocalData() {
      window.localStorage.setItem(
        `${window.location.host}_requireManage`,
        JSON.stringify(this.tableData)
      );
    },
    addTableData() {
      const data = this.$route.query.formData;
      if (!data) {
        return;
      }
      window.sessionStorage.setItem("addRequireFlag", false);
      this.tableData.push(data);
      this.setLocalData();
    },
    handleRouter(route) {
      this.$router.push({
        path: route,
        query: { formData: this.multipleSelection },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.require-container { margin: 0 auto;
  padding: 20px;
  max-width: 80vw;
  .require-title {
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    .require-btn-group {
      ::v-deep {
        .el-button {
          margin-right: 20px;
        }
      }
    }
  }
  .require-body {
    padding: 20px;
    background-color: #fff;
  }
  ::v-deep {
    .el-table {
      height: 70vh !important;
    }
  }
}
</style>

<style lang="less">
.el-table tr {
  cursor: pointer;
}
</style>